<div class="app">
  <!--  <header>
    <h2>{{title}}</h2>
  </header> -->
  <main>
    <div class="org-wrapper" #orgWrapper>
      @for (sec of sections; track sec.leader.id; let first = $first; let secIndex = $index) {
      <div class="org-sec" [class.active]="sec.leader.id === activeSection?.id" [attr.data-id]="sec.leader.id">
        @if (first) {
        <div class="persons-wrap leader">
          <app-person-card [class.active]="sec.leader.id === activeSection?.id" [person]="sec.leader"
            (click)="selectPerson(sec.leader)" />
        </div>
        }
        <div class="persons-wrap subordinates" [class.has-children]="hasChildren(sec.subordinate, secIndex)"
          [style]="calcSecStyle(sec)">
          @for (person of sec.subordinate; track person.id; let subIndex = $index) {
          <app-person-card [class.sticky]="isSticky(person, secIndex)" [class.active]="person.id === activeSection?.id"
            [class.hide]="subIndex > subordinateVisibleRange(sec)" [class.more]="subIndex > smallestIndex"
            [person]="person" (click)="selectPerson(person)" />
          }
          @if (hasMoreSectionOpened[sec.leader.id] != null && !animating) {
          <div class="card-container open-close" (click)="toggleOpened(sec)">{{hasMoreSectionOpened[sec.leader.id] ?
            '收起' : '展开'}}</div>
          }
        </div>
      </div>
      }
    </div>
    <div class="logo">
      <b><i>Bleach</i></b>
      <!--  <svg _ngcontent-ng-c3811030075="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="32"
        height="32">
        <g _ngcontent-ng-c3811030075="" clip-path="url(#a)">
          <path _ngcontent-ng-c3811030075="" fill="url(#b)"
            d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z">
          </path>
          <path _ngcontent-ng-c3811030075="" fill="url(#c)"
            d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z">
          </path>
        </g>
        <defs _ngcontent-ng-c3811030075="">
          <linearGradient _ngcontent-ng-c3811030075="" id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722"
            gradientUnits="userSpaceOnUse">
            <stop _ngcontent-ng-c3811030075="" stop-color="#E40035"></stop>
            <stop _ngcontent-ng-c3811030075="" offset=".24" stop-color="#F60A48"></stop>
            <stop _ngcontent-ng-c3811030075="" offset=".352" stop-color="#F20755"></stop>
            <stop _ngcontent-ng-c3811030075="" offset=".494" stop-color="#DC087D"></stop>
            <stop _ngcontent-ng-c3811030075="" offset=".745" stop-color="#9717E7"></stop>
            <stop _ngcontent-ng-c3811030075="" offset="1" stop-color="#6C00F5"></stop>
          </linearGradient>
          <linearGradient _ngcontent-ng-c3811030075="" id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344"
            gradientUnits="userSpaceOnUse">
            <stop _ngcontent-ng-c3811030075="" stop-color="#FF31D9"></stop>
            <stop _ngcontent-ng-c3811030075="" offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop>
          </linearGradient>
          <clipPath _ngcontent-ng-c3811030075="" id="a">
            <path _ngcontent-ng-c3811030075="" fill="#fff" d="M0 0h223v236H0z"></path>
          </clipPath>
        </defs>
      </svg> -->
    </div>
    <button class="nav-btn prev" [class.hide]="currentSecIndex <= 0" (click)="jumpDirection(-1)">&#9650;</button>
    <button class="nav-btn next" [class.hide]="currentSecIndex >= sections.length - 1"
      (click)="jumpDirection(1)">&#9660;</button>
    <aside class="stairs">
      @for (sec of sections; track sec.leader.id) {
      <div class="ladder" [class.active]="sec.leader.id === activeSection?.id" (click)="selectPerson(sec.leader)">
        <span class="ld-name">{{sec.leader.name}}</span>
        <svg class="ld-arrow" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor"
            d="m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12q0-.2.063-.375T4.7 11.3l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12q0 .425-.288.713T19 13z" />
        </svg>
      </div>
      }
    </aside>

    <div class="mine">
      <a href="https://madom.gitee.io/ysx-videos" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 48 48">
          <g fill="none" stroke="currentColor" stroke-width="4">
            <path stroke-linejoin="round"
              d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Z" />
            <path stroke-linejoin="round"
              d="M24 18a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm0 18a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm-9-9a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm18 0a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z" />
            <path stroke-linecap="round" d="M24 44h20" />
          </g>
        </svg>
      </a>
      <a href="https://github.com/lycHub" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24">
          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
            <path
              d="M15.172 15.299c1.202-.25 2.293-.682 3.14-1.316c1.448-1.084 2.188-2.758 2.188-4.411c0-1.16-.44-2.243-1.204-3.16c-.425-.511.819-3.872-.286-3.359c-1.105.514-2.725 1.198-3.574.947c-.909-.268-1.9-.416-2.936-.416c-.9 0-1.766.111-2.574.317c-1.174.298-2.296-.363-3.426-.848c-1.13-.484-.513 3.008-.849 3.422C4.921 7.38 4.5 8.44 4.5 9.572c0 1.653.895 3.327 2.343 4.41c.965.722 2.174 1.183 3.527 1.41" />
            <path
              d="M10.37 15.391c-.58.637-.869 1.24-.869 1.813V21m5.671-5.701c.549.719.823 1.364.823 1.936V21M3.5 15.668c.45.054.783.26 1 .618c.326.537 1.537 2.526 2.913 2.526H9.5" />
          </g>
        </svg>
      </a>

    </div>
  </main>
</div>